<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h2>工作台</h2>
    </div>

    <div class="dashboard-content">
      <el-card class="app-list">
        <template #header>
          <div class="card-header">
            <span>应用列表</span>
            <el-button class="button" text>查看全部</el-button>
          </div>
        </template>
        <search-form :form-items="searchItems" @search="handleSearch" />
        <base-table
          :data="tableData"
          :columns="tableColumns"
          :loading="loading"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @page-change="handlePageChange"
        >
          <template #status="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </base-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BaseTable, SearchForm } from '@/components/Table';
import { useDashboard, type FormItem, type TableColumn } from '@/hooks/useDashboard';
import { appApi } from '@/api';

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'active':
      return 'success';
    case 'inactive':
      return 'info';
    case 'pending':
      return 'warning';
    default:
      return 'info';
  }
};

// 搜索表单配置
const searchItems: FormItem[] = [
  {
    type: 'input',
    label: '应用名称',
    prop: 'name',
    placeholder: '请输入应用名称'
  },
  {
    type: 'select',
    label: '应用状态',

    prop: 'status',
    placeholder: '请选择应用状态',
    options: [
      { label: '全部', value: '' },
      { label: '活跃', value: 'active' },
      { label: '非活跃', value: 'inactive' },
      { label: '待处理', value: 'pending' }
    ]
  },
  {
    type: 'select',
    label: '应用类型',
    prop: 'type',
    width: '150px',
    placeholder: '请选择应用类型',
    options: [
      { label: '全部', value: '' },
      { label: 'Web', value: 'web' },
      { label: '移动端', value: 'mobile' },
      { label: '桌面端', value: 'desktop' }
    ]
  },
  {
    type: 'date',
    label: '创建时间',
    prop: 'createTime',
    dateType: 'daterange',
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期',
    valueFormat: 'YYYY-MM-DD'
  }
];

// 表格列配置
const tableColumns: TableColumn[] = [
  {
    prop: 'name',
    label: '应用名称',
    minWidth: 150
  },
  {
    prop: 'description',
    label: '应用描述',
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    prop: 'type',
    label: '应用类型',
    width: 100
  },
  {
    prop: 'version',
    label: '版本',
    width: 100
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    slotName: 'status'
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180
  },
  {
    type: 'action',
    label: '操作',
    width: 200,
    actions: [
      {
        label: '详情',
        type: 'primary' as const,
        link: true,
        handler: (row: any) => {
          console.log('查看详情', row);
        }
      },
      {
        label: '编辑',
        type: 'primary' as const,
        link: true,
        handler: (row: any) => {
          console.log('编辑', row);
        }
      },
      {
        label: '删除',
        type: 'danger' as const,
        link: true,
        handler: (row: any) => {
          console.log('删除', row);
        }
      }
    ]
  }
];

const { tableData, loading, currentPage, pageSize, total, handleSearch, handlePageChange } =
  useDashboard({
    fetchApi: appApi.getAppList,
    searchItems,
    tableColumns
  });
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: var(--theme-text-color);
    }

    .dashboard-actions {
      display: flex;
      gap: 10px;
    }
  }

  &-stats {
    margin-bottom: 20px;

    .stat-card {
      height: 100px;

      .stat-content {
        display: flex;
        align-items: center;
        height: 100%;
      }

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }

      .stat-info {
        .stat-title {
          font-size: 14px;
          color: var(--theme-text-color);
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: var(--theme-text-color);
        }
      }
    }
  }

  &-content {
    .app-list {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.el-card.is-always-shadow {
  background-color: var(--theme-module-bg);
  border: none;
}
</style>
